<template>
  <div class="main">
    <div class="title"><span class="span">丨</span>资讯
      <el-input
          style="width: 240px; padding: 0; position: absolute; right: 10px;"
          placeholder="搜索一下"
          :prefix-icon="Search"
          v-model="search"
          />
    </div>
    <hr>
    <ul class="article">
      <li v-for="(item,index) in filterArticle" :key="index" @click="open(index)">
        <img src="@/assets/noimg.png">
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <div class="text">{{ item.content }}</div>
        </div>
      </li>
    </ul>
  </div>
  <el-drawer 
    v-model="drawer"
    >
      <div class="drawerTitle">{{ article[articleID].title }}</div>
      <div class="drawerText">{{ article[articleID].content }}</div>

    </el-drawer>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';
const article = [
  {
    title: "全球水产养殖市场持续增长",
    content: "随着全球人口的不断增加和健康饮食趋势的兴起，水产养殖行业正经历着前所未有的增长。据市场研究报告，预计到2027年，全球水产养殖市场将突破3000亿美元，年均增长率将达到7%。这一增长的背后是多重因素的推动，首先，水产养殖比传统的畜牧业更加高效，它不仅能满足全球蛋白质需求，同时也对环境的影响相对较小。尤其是在亚洲地区，水产养殖已经成为解决粮食安全和满足消费者需求的重要方式。此外，水产产品日益受到欧美消费者的青睐，因其富含高质量的蛋白质、Omega-3脂肪酸等营养成分。技术创新，尤其是养殖管理系统、精准监控和智能饲料投放技术的应用，使得生产效率大大提高，水产养殖行业的可持续性和环境友好性得到了加强。"
  },
  {
    title: "可持续水产养殖技术的创新",
    content: "随着环保问题日益突出，水产养殖行业也在积极寻求可持续发展的解决方案。近年来，许多先进的水产养殖技术不断涌现，帮助行业减少环境负担并提高生产效率。例如，循环水养殖系统（RAS）是一项突破性技术，它通过水质循环、清洁和过滤，极大地减少了水资源浪费。与传统养殖方式相比，RAS系统不仅能节约用水，还能有效减少污染物的排放，特别是在鱼类疾病管理方面具有明显优势。与此同时，精准养殖技术的发展使得水质监控更加精细，传感器和物联网技术帮助养殖者实时监控水温、pH值、氧气浓度等关键数据，从而优化养殖环境，减少药物使用。智能化养殖管理系统的引入也使得养殖过程更加高效，养殖者可以通过大数据分析调整饲料投放、疾病预防等环节，显著提高产量并降低成本。"
  },
  {
    title: "海洋污染对水产资源的影响",
    content: "海洋污染已经成为全球水产行业面临的重大挑战。每年约有800万吨塑料垃圾进入海洋，这些废弃物不仅影响海洋生态系统的稳定性，还威胁到水产资源的健康。塑料污染尤其对水生物种造成严重威胁，鱼类、海洋哺乳动物等误食塑料垃圾，可能导致消化问题、内分泌失调，甚至死亡。此外，塑料微粒通过食物链进入其他海洋生物体内，最终可能影响到人类的食物安全。除了塑料污染，海洋中的重金属污染也在不断加剧，重金属如汞、铅、镉等通过水体积累，危害水生物健康，同时这些有害物质也会通过水产品进入消费者的体内，对健康构成威胁。更广泛地说，海洋污染不仅影响水产资源的可持续性，还会破坏海洋食物链的稳定性，威胁全球海洋生态系统的平衡。"
  },
  {
    title: "水产养殖中的抗生素使用问题",
    content: "抗生素在水产养殖中的使用问题已引发了全球范围的关注。由于水产养殖场常面临鱼类疾病的威胁，许多养殖场依赖抗生素来预防和治疗疾病。然而，过度使用抗生素带来了严重的健康风险，包括抗药性问题。细菌耐药性的增强使得许多疾病变得更难治疗，甚至可能传递给人类，威胁公共健康。此外，抗生素的过量使用会导致药物残留进入水产产品中，这些残留物质最终通过食物链传递，影响消费者的健康。为了应对这一问题，世界卫生组织（WHO）和许多国家开始加强对抗生素使用的管理，并推动无抗生素养殖的替代方案。例如，使用益生菌、免疫增强剂以及天然药物来增强鱼类的免疫力，已成为养殖业的研究重点。这些替代方案的推广不仅能够减少抗生素使用，还能减少水源污染，推动养殖业朝着更可持续的方向发展。"
  },
  {
    title: "中国水产进出口贸易发展迅速",
    content: "中国作为全球最大的水产生产和消费国，其水产进出口贸易在过去几年持续增长，成为全球水产行业的重要一环。根据最新统计数据，2024年中国水产出口的增幅仍然强劲，特别是冷冻鱼类、虾类和贝类等产品需求不断扩大。中国的水产产品以其价格竞争力、品种多样性以及生产标准逐步赢得了国际市场的认可，主要出口市场包括美国、欧盟和东南亚等地区。然而，随着国际市场对食品安全的要求不断提高，贸易壁垒也逐渐增多，尤其是一些国家对中国水产品设置了更加严格的进口标准，这给中国水产出口带来一定的挑战。与此同时，随着中国消费者生活水平的提升，对高端水产品的需求也在增长，尤其是对鲍鱼、三文鱼等进口水产产品的需求逐年增加。中国的水产行业也开始加大力度推动国内生产的标准化和品牌化，以更好地应对国际市场的竞争。"
  },
  {
    title: "水产养殖业的自动化发展",
    content: "随着科技的发展，自动化技术在水产养殖中的应用也越来越广泛。自动化系统的引入使得水产养殖能够更加精细化、高效化。例如，通过自动投喂系统，养殖者可以精确控制饲料的投放量，避免过量投喂造成浪费，并提高鱼类的生长效率。此外，智能监控系统能够实时监测养殖环境中的水温、溶氧量、酸碱值等参数，及时调节养殖条件，优化养殖环境，减少人工干预，降低劳动力成本。自动化技术还可用于水产养殖中的疾病监测，借助传感器和AI技术，自动检测水质变化和鱼群健康状况，提前预警并采取相应措施。这些自动化技术的应用不仅提高了养殖效率，也推动了水产养殖行业向更加智能化和可持续的方向发展。"
  },
  {
    title: "全球水产行业的绿色认证趋势",
    content: "随着消费者对环境和可持续发展意识的提高，越来越多的水产公司开始关注绿色认证。绿色认证不仅可以提升企业形象，还能增加产品在国际市场上的竞争力。目前，全球多个组织和认证机构，如海洋管理委员会（MSC）和水产养殖管理委员会（ASC），正在推动水产行业的可持续发展，并为符合标准的水产养殖场和捕捞公司颁发认证。这些认证要求企业在生产过程中遵循环保和资源可持续使用的原则，减少生态影响，保护海洋环境。消费者对认证产品的需求也在逐步上升，尤其是在欧美等发达市场，这种趋势推动了全球水产行业的绿色转型。预计未来，绿色认证将成为水产行业的重要标配，影响着行业的发展方向。"
  },
  {
    title: "创新水产饲料的研发趋势",
    content: "随着水产养殖业的快速发展，对饲料的需求也不断增加。为了提高水产养殖的生产效率和降低环境污染，创新饲料的研发成为行业的重点。传统水产饲料主要依赖鱼粉和植物性原料，但这些原料的生产常常对环境造成压力。为了解决这一问题，许多企业和研究机构正在探索替代饲料原料，例如通过使用昆虫蛋白、藻类和微生物等新型饲料成分。这些新型饲料不仅能够提供水产所需的丰富营养，还能减少对传统饲料原料的依赖，缓解资源短缺的问题。同时，随着饲料生产工艺的进步，饲料的生产效率和水产养殖的整体效益也得到了显著提升。创新饲料的研发正在成为推动水产行业可持续发展的关键因素之一。"
  }


]


const filterArticle = computed(()=>
article.filter(data=>!search.value||data.title.includes(search.value)
)
)

const articleID = ref(0)
const drawer = ref(false)
function open(id){
  drawer.value = true
  articleID.value = id
}
const search = ref('')

</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.main{
  width: 98%;
  height: 89vh;
  box-shadow: 0 0 .1852rem rgba(0, 0, 0, .2);
  margin:1vh auto;
  overflow: auto;
  position: relative;
  div{
    padding: 10px 0;
  }
  .span{
    color: skyblue;
    font-size: .3704rem;
  }
  .title{
    font-size: .3704rem;
  }
  span{
    font-size: .2778rem ;
  }
}
.article li{
  height: 3.3333rem;
  cursor: pointer;
  overflow: hidden;
  &:hover{
    box-shadow: 0 0 .1852rem rgba(0, 0, 0, .2);
  }
  img{
    height: 2.7778rem;
    width: 2.7778rem;
    border: 1px solid;
    float: left;
    margin: 10px;
    object-fit: cover;
  }
}
.content{
  .title{
    font-size: .3704rem;
    line-height: .3704rem;
    font-weight: 900;
  }
  .text{
    font-size: .2778rem;
  }
}
.drawerTitle{
  font-size: .4259rem;
  text-align: center;
  margin-bottom: 10%;
  font-weight: 900;
}
.drawerText{
  font-size: .3704rem;
}
</style>